<template>
	<view class="recommendation-container">
		<!-- 主要内容区域 -->
		<view class="content">
			<view class="settings-card">
				<!-- 标题和开关 -->
				<view class="header-section">
					<text class="card-title">个性化推荐</text>
					<u-switch
						v-model="isEnabled"
						activeColor="#ff4757"
						inactiveColor="#e5e5e5"
						size="40"
						@change="onSwitchChange"
					></u-switch>
				</view>
				
				<!-- 描述文本 -->
				<view class="description-section">
					<text class="description-text">
						您可以选择开启或关闭个性化推荐设置，开启时，系统将根据个人偏好提升您的使用体验，关闭后您所看到的推荐数据量不会发生变化，但会降低推荐内容与您兴趣偏好的相关度。
					</text>
				</view>
			</view>
		</view>
		
		<!-- 确认按钮 -->
		<view class="button-container">
			<u-button
				type="primary"
				text="确认修改"
				@click="handleConfirm"
				class="confirm-btn"
			></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEnabled: true, // 默认开启
				originalValue: true // 保存原始值，用于判断是否有修改
			}
		},
		computed: {
			hasChanged() {
				return this.isEnabled !== this.originalValue;
			}
		},
		methods: {
			// 开关状态改变
			onSwitchChange(value) {
				this.isEnabled = value;
				console.log('个性化推荐状态:', value ? '开启' : '关闭');
			},
			
			// 确认修改
			handleConfirm() {
				if (!this.hasChanged) {
					uni.showToast({
						title: '未做任何修改',
						icon: 'none'
					});
					return;
				}
				
				// 显示加载状态
				uni.showLoading({
					title: '保存中...'
				});
				
				// 模拟保存操作
				setTimeout(() => {
					uni.hideLoading();
					
					// 保存到本地存储
					uni.setStorageSync('personalizedRecommendation', this.isEnabled);
					
					// 更新原始值
					this.originalValue = this.isEnabled;
					
					uni.showToast({
						title: '设置保存成功',
						icon: 'success'
					});
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1000);
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['帮助', '联系客服', '关于我们'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			},
			
			// 加载设置
			loadSettings() {
				const savedValue = uni.getStorageSync('personalizedRecommendation');
				if (savedValue !== null && savedValue !== undefined) {
					this.isEnabled = savedValue;
					this.originalValue = savedValue;
				}
			}
		},
		onLoad() {
			// 页面加载时获取设置
			this.loadSettings();
		}
	}
</script>

<style lang="scss" scoped>
.recommendation-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	
	.content {
		flex: 1;
		padding: 20rpx;
		
		.settings-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 40rpx;
			margin-bottom: 40rpx;
			
			.header-section {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				
				.card-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
			}
			
			.description-section {
				.description-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					text-align: justify;
				}
			}
		}
	}
	
	.button-container {
		padding: 20rpx 40rpx 40rpx;
		
		.confirm-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			background: linear-gradient(135deg, #ff4757, #ff3742);
			border: none;
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
}
</style> 